<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <link rel="stylesheet" href="/static/base/common/css/sapar.css"/>
    <link rel="stylesheet" href="/static/base/static/css/index_inner.css"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/modules/layer/default/layer.css" media="all">
    <title>居民与房屋管理-主页</title>
    <style type="text/css">
        .red{
            border: 1px red solid;
        }

    </style>
</head>


<body>
<div id="container" style="width: 98%;margin: 0 auto" >

    <form class="layui-form" action="" style="margin-top: 20px;">
        <div class="layui-collapse" lay-filter="test">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">业主信息</h2>
                <div class="layui-colla-content layui-show">
                    <table class="layui-table">

                        <tr>
                            <td width="150px" >代表人/业主</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="name" lay-verify="charLength" autocomplete="off"  class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例：张三</div>
                            </td>
                        </tr>
                        <tr>
                            <td >业主联系电话</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="tellphone" autocomplete="off"  class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例：18200213323</div>
                            </td>
                        </tr>
                        <tr>
                            <td>业主身份证号码</td>
                            <td >
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="idCard" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例：511502186901022211</div>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">房屋产权信息</h2>
                <div class="layui-colla-content">
                    <table class="layui-table">
                        <tr>
                            <td width="150px">房屋编号</td>
                            <td>
                                <div class="layui-inline" style="float: left;">
                                    <input type="text" name="houseNum" lay-verify="" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left;">例:XW100001</div>
                            </td>
                        </tr>
                        <tr>
                            <td>房产证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="cardNum"  autocomplete="off" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>房屋凭证</td>
                            <td>
                                <div class="layui-input-inline">
                                    <select name="houseCoucher">
                                        <option value="1">房屋所有权证</option>
                                        <option value="2">房屋使用权证</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>房屋权证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="houseWarrant" autocomplete="off" class="layui-input">
                                </div>
                            </td>


                        </tr>
                        <tr>
                            <td>房屋权证发放时间</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" id="time" name="time" lay-verify="date" autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>住房地址</td>
                            <td>
                                <div class="layui-input-inline">
                                    <select name="province" id="province" lay-filter="province" disabled>
                                        <option value="四川省">四川省</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="city" id="city" lay-filter="city" disabled>
                                        <option value="宜宾市">宜宾市</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="county" id="county" lay-filter="county" disabled>
                                        <option value="兴文县">兴文县</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="town" id="town" lay-filter="town"></select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="village" id="village" lay-filter="village"></select>
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>详细地址</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="address" lay-verify="charLength" autocomplete="off" class="layui-input">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">房屋信息</h2>
                <div class="layui-colla-content">
                    <table class="layui-table">
                        <tr>
                            <td>建筑物名称</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="buildName" autocomplete="off" lay-verify="charLength" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>建成年份(年)</td>
                            <td colspan="2">
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="buildTime" lay-verify="number|charLength" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例:2003</div>
                            </td>
                        </tr>
                        <tr>
                            <td>建筑物用途</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="checkbox" checked name="buildUse" lay-skin="primary" value="住宅" title="住宅">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="商业" title="商业">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="办公" title="办公">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="工业" title="工业">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="综合" title="综合">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="仓储" title="仓储">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="其他" title="其他">
                                </div>
                            </td>

                        </tr>

                        <tr>
                            <td>物管单位名称</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="tubeUnit" lay-verify="charLength" autocomplete="off" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>本户建筑面积（㎡）</td>
                            <td colspan="2">
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="area" lay-verify="number" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例:200</div>
                            </td>
                        </tr>
                        <tr>
                            <td>房屋结构</td>
                            <td colspan="2">
                                <div id="structure" class="layui-inline">
                                    <input type="radio" checked name="structure" lay-skin="primary" value="钢、钢筋混泥土结构" title="钢、钢筋混泥土结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="钢结构" title="钢结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="钢筋混泥土结构" title="钢筋混泥土结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="混合结构" title="混合结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="砖木结构" title="砖木结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="木结构" title="木结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="简易棚" title="简易棚">
                                    <input type="radio" name="structure" lay-skin="primary" value="其他" title="其他">
                                </div>
                            </td>

                        </tr>

                        <tr>
                            <td>房屋用途</td>
                            <td colspan="2">
                                <div id="houseUse" class="layui-inline">
                                    <input type="radio" checked name="houseUse" lay-skin="primary" value="住宅" title="住宅">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="宿舍" title="宿舍">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="临时工棚" title="临时工棚">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="办公用房" title="办公用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="商业用房" title="商业用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="教科文体医用房" title="教科文体医用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="工业用房" title="工业用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="其他"  title="其他">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td rowspan="2">房屋来源</td>
                            <td style="text-align: center">
                                自有产权
                            </td>
                            <td>租赁公房</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="houseFrom" lay-skin="primary" value="购买商品用房" title="购买商品用房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="购买房改房" title="购买房改房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="购买经济适用房" title="购买经济适用房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="个人自建房" title="个人自建房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="其他形式取得" title="其他形式取得">
                                </div>
                            </td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="单位自管公房" title="单位自管公房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="政府公管公房" title="政府公管公房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="个人私有" title="个人私有">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>房屋户型</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <select name="huxing" lay-filter="aihao">
                                        <option value="三室两厅一卫">三室两厅一卫</option>
                                        <option value="二室二厅一厨一卫">二室二厅一厨一卫</option>
                                        <option value="三室二厅一厨一卫">三室二厅一厨一卫</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">土地信息</h2>
                <div class="layui-colla-content">
                    <table class="layui-table">
                        <tr>
                            <td width="150px">土地取得方式</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="landGet" value="拍卖" title="拍卖">
                                    <input type="radio" name="landGet" value="划拨" title="划拨">
                                    <input type="radio" name="landGet" value="转让" title="转让">
                                    <input type="radio" name="landGet" value="承租" title="承租">
                                    <input type="radio" name="landGet" value="其他" title="其他">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>批准土地面积(㎡)</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="landArea" lay-verify="number" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例:200</div>
                            </td>

                        </tr>
                        <tr>
                            <td>实际使用土地面积(㎡)</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="number" name="landUsearea" lay-verify="number" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例:200</div>
                            </td>
                        </tr>
                        <tr>
                            <td>批准土地用途</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landPurpose" lay-verify="charLength" autocomplete="off" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>实际土地用途</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landUsepurpose" lay-verify="charLength" autocomplete="off" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>批准使用年限(年)</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="landYear" lay-verify="charLength|number" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例:50</div>
                            </td>
                        </tr>
                        <tr>
                            <td>土地证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landNum" lay-verify="charLength" autocomplete="off" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>土地凭证</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="landCoucher" value="国有土地使用证" title="国有土地使用证">
                                    <input type="radio" name="landCoucher" value="集体土地使用证" title="集体土地使用证">
                                    <input type="radio" name="landCoucher" value="宅基地证明" title="宅基地证明">
                                </div>
                            </td>


                        </tr>
                        <tr>
                            <td>土地权证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input  type="text" name="landWarrant" lay-verify="charLength"  autocomplete="off" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>土地权证发证时间</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landTime" id="landTime" lay-verify="date" autocomplete="off" placeholder="yyyy-mm-dd" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>产权人类型</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="landTopr" value="单位" title="单位">
                                    <input type="radio" name="landTopr" value="个人" title="个人">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>产权人姓名</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="landUname" lay-verify="charLength" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例：李四</div>
                            </td>
                        </tr>
                        <tr>
                            <td>产权人证件类型</td>
                            <td>
                                <div class="layui-inline">
                                    <select name="landIdtype">
                                        <option value="居民身份证">居民身份证</option>
                                        <option value="临时身份证">临时身份证</option><!-- disabled = "" 则是不可选 -->
                                    </select>
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>产权人联系电话</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="text"  name="landTel" lay-verify="phone" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例：18212342331</div>
                            </td>
                        </tr>
                        <tr>
                            <td>产权人证件号码</td>
                            <td>
                                <div class="layui-inline" style="float: left">
                                    <input type="text" name="landIdCard" lay-verify="identity"  autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="float: left">例：511513198902022211</div>
                            </td>

                        </tr>

                    </table>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="width: 98%;margin: 20px auto">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>



</body>



<script type="text/javascript" src="/static/webjars/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
<script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
<script type="text/javascript" src="/static/base/static/js/index_inner.js"></script>
<script>
    layui.use('form', function() {
        var deviceWidth = document.documentElement.clientWidth;

        if (deviceWidth > 1080) {
            deviceWidth = 1080;
        }
        document.documentElement.style.fontSize = deviceWidth / 25 + "px";


        var layedit = layui.layedit;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var pattern_number = /\d+/;

        //日期
        laydate.render({
            elem: '#time'
        });

        laydate.render({
            elem: '#landTime'
        });


        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {

                    return '标题至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , charLength: function (value) {
                console.log(value>20000);
                console.log(value<20000);
                if (value.length > 20) {
                    return '字符不能超过20个！';
                }
            }
            , intNum: function (value) {
                if (!value.match(pattern_number)) {
                    return '请填写数字！';
                }

            }
        });


        function checkNotNull() {
            var flag = true;
            $("input[type='text']").each(function () {

                if ("" == $(this).val()) { //判断元素对象的value值
                    $(this).addClass("red"); //添加css样式
                    flag = false;
                } else {
                    $(this).removeClass("red");
                }
                var divBox = $(this).parent().parent().parent().parent().parent().parent();
                if ($(this).attr("class") == "layui-input red" && divBox.attr("class") != "layui-colla-content layui-show") {
                    divBox.addClass("layui-show")
                }

            });
            return flag;
        }


        //监听提交
        form.on('submit(demo1)', function (data) {
            var flag = true;//判断是否数据格式都填写正确
            console.log(flag);
            if (!checkNotNull()) {
                layer.msg('还有未填写的地方哦', {time: 2000, shift: 6, icon: 5}, function () {
                });
                flag = false;
            } else {
                flag = true;
            }

            if (flag) {
                var today = new Date();
                var year = today.getFullYear();
                var month = today.getMonth() + 1;
                var date = today.getDate();
                var day = today.getDay();
                var hours = today.getHours();
                var minutes = today.getMinutes();
                var seconds = today.getSeconds();
                // data.field.name = $("input[name='name']").val();
                // data.field.idCard = $("input[name='idCard']").val();
                // data.field.houseNum = $("input[name='houseNum']").val();
                // data.field.cardNum = $("input[name='cardNum']").val();
                // data.field.houseWarrant = $("input[name='houseWarrant']").val();
                // data.field.time = $("input[name='time']").val();
                data.field.province = $("#province option:selected").text();
                data.field.city = $("#city option:selected").text();
                data.field.county = $("#county option:selected").text();
                data.field.town = $("#town option:selected").text();
                data.field.village = $("#village option:selected").text();
                // data.field.buildName = $("input[name='buildName']").val();
                // data.field.buildTime = $("input[name='buildTime']").val();
                data.field.buildUse = $("input[name='buildUse']").val();
                // data.field.tubeUnit = $("input[name='tubeUnit']").val();
                // data.field.time = $("input[name='time']").val();
                // data.field.area = $("input[name='area']").val();
                // data.field.structure = $("input[name='structure']").val();
                // data.field.structure = $("input[name='structure']").val();
                // data.field.structure = $("input[name='structure']").val();
                // data.field.structure = $("input[name='structure']").val();
                // data.field.createTime = ("" + nowtimestamp).trim();
                // data.field.content = layedit.getContent(editIndex);
                // data.field.eventTypeBig = $("#eventTypeBig option:selected").text();
                // data.field.eventTypeTwo = $("#eventTypeTwo option:selected").text();
                // data.field.province = $("#province option:selected").text();
                // data.field.city = $("#city option:selected").text();
                // data.field.county = $("#county option:selected").text();
                // data.field.town = $("#town option:selected").text();
                // data.field.village = $("#village option:selected").text();
                // data.field.eventSrcname = "网上举报";
                // data.field.eventNature = "一般案件";
                data.field.updateTime = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
                data.field.lastTime = '';

                console.log(data.field);
                $.ajax({
                    url: '/ajax/save/houseinfo',
                    type: 'POST',
                    contentType: 'application/json;charset=utf-8',
                    //设置请求头信息
                    dataType: "json",
                    data: JSON.stringify(data.field),
                    success: function (data) {
                        layer.msg(data.code);
                        nowtimestamp = (new Date()).getTime();
                    },
                    error: function (res) {
                        layer.msg(res);
                    }
                });


            }
            return false;
        });

        $.post("/ajax/pub/gettown", {code: 1},
            function (result) {
                //输出
                //执行清空
                $("#town").empty();
                $("#village").empty();
                for (i = 0; i < result.length; i++) {
                    document.getElementById("town").options.add(new Option(result[i].townName, result[i].townId));
                }
                form.render();
            }
        );

        $.post("/ajax/pub/getvillage", {code: 1},
            function (result) {
                //输出
                //执行清空
                $("#village").empty();
                for (i = 0; i < result.length; i++) {
                    document.getElementById("village").options.add(new Option(result[i].villageName, result[i].villageName));
                }
                form.render();
            }
        );

        //初始化乡镇
        form.on('select(town)', function (data) {
            console.log(data.value);
            $.post("/ajax/pub/getvillage", {code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    $("#village").empty();
                    for (i = 0; i < result.length; i++) {
                        document.getElementById("village").options.add(new Option(result[i].villageName, result[i].villageName));
                    }
                    form.render();
                }
            );
        });

    });


</script>



</html>
